<template>
  <div>
  <avue-data-box class="wrap" :option="option"></avue-data-box>
  <!-- <div class="filter">
      <el-date-picker
        v-model="form.timeRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="timeChange"
        :picker-options="pickerOptions">
      </el-date-picker>
   </div> -->
   <h2>
      新注册人数 
      <div>
        <span @click="getUserCharts(1)">昨日</span>
        <span @click="getUserCharts(2)">近7日</span>
        <span @click="getUserCharts(3)">近15日</span>
      </div>
    </h2>
   <div id="myUserLine" :style="{ height: '300px' }"></div>
   <h2 style="margin-top: 20px">
      已成交订单 
      <div>
        <span @click="getSaleCharts(1)">昨日</span>
        <span @click="getSaleCharts(2)">近7日</span>
        <span @click="getSaleCharts(3)">近15日</span>
      </div>
    </h2>
   <div id="myOrderLine" :style="{ height: '300px' }"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { fetchIndex, fetchUserCharts, fetchSaleCharts } from "@/api/admin/index";

import moment from "moment";

export default {
  name: "wel",
  data() {
    return {
      isShow: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      materialList: [],
      timeRange: [],
      option: {
        span: 8,
        data: [
          {
            title: '昨日注册人数',
            count: 0,
            icon: 'el-icon-user',
            color: 'rgb(49, 180, 141)',
          },
          {
            title: '累计注册人数',
            count: 0,
            icon: 'el-icon-c-scale-to-original',
            color: 'rgb(56, 161, 242)',
          },{
            title: '已成交订单',
            count: 0,
            icon: 'el-icon-user',
            color: 'rgb(49, 180, 141)',
          },
          {
            title: '待回购订单',
            count: 0,
            icon: 'el-icon-c-scale-to-original',
            color: 'rgb(56, 161, 242)',
          },{
            title: '销售中订单',
            count: 0,
            icon: 'el-icon-user',
            color: 'rgb(49, 180, 141)',
          },
          {
            title: '消费总额',
            count: 0,
            icon: 'el-icon-c-scale-to-original',
            color: 'rgb(56, 161, 242)',
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["website","permissions","userinfo"])
  },
  mounted() {
    this.getIndexData()
    this.getUserCharts(1)
    this.getSaleCharts()
  },
  created() {
    // this.sys_user_add = this.permissions["sys_user_add"];
  },
  methods: {
    getIndexData(){
      fetchIndex().then(res => {
        this.option.data[0].count = res.data.data.countToday
        this.option.data[1].count = res.data.data.countUser
        this.option.data[2].count = res.data.data.chengjiao
        this.option.data[3].count = res.data.data.huigou
        this.option.data[4].count = res.data.data.xiaoshou
        this.option.data[5].count = res.data.data.total
      });
    },
    getUserCharts(type){
      fetchUserCharts({type: type}).then(res => {
        this.drawLine(res.data.data, 'myUserLine')
      });
    },
    getSaleCharts(type){
      fetchSaleCharts({type: type}).then(res => {
        this.drawLine(res.data.data, 'myOrderLine')
      });
    },
    drawLine(data, dom) {
      if(!data.time.length && !data.datas.length){
        var html =
        '<div style="color:#868686; font-size: 16px;text-align:center;line-height:180px;">暂无数据</div>'
        document.getElementById(dom).innerHTML = html
        document
          .getElementById(dom)
          .removeAttribute('_echarts_instance_')
          return
      }

      let myChart = this.$echarts.init(document.getElementById(dom));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
          borderWidth: 1,
          borderColor: "#ccc",
          padding: 10,
          backgroundColor: "#fff",
          textStyle: {
            color: "#666"
          },
        },
        grid: {
          //调整图表上下左右位置
          top: "19%",
          left: "3%",
          right: "3%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false
          },
          boundaryGap: false,
          data: data.time||[]
        },
        yAxis: {
          type: "value",
          // splitNumber: 4,
          axisLine: {
            show: false
          },
          minInterval: 1,
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: data.datas,
            type: 'line',
            symbol: "none",
            smooth: true,
            areaStyle: {}
          }
        ]
      });
    },
    materialChange(e){
      this.form.material = e
      this.getIndexCharts()
      this.$forceUpdate()
    },
    timeChange(e){
      this.getIndexCharts()
    }
  }
};
</script>

<style lang="less">
h2 {
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  span {
    font-size: 12px;
    border: 1px solid #d1d1d1;
    font-weight: normal;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
  }
}
.wrap {
  padding: 20px;
}
</style>
